import china_map from '@/assets/server/china_map.jpeg'
import { computed, defineComponent, h, ref } from 'vue'
import ChinaMap from './chinaMap'
import DataCenter from './dataCenter'
import ningxMap from './ningxMap'

export default defineComponent({
  emits: ['showCover'],
  components: {
    ChinaMap,
    DataCenter,
    ningxMap,
  },
  setup(props, { emit }) {
    const step = ref(0)
    const Component = computed(() => {
      let component = ChinaMap
      switch (step.value) {
        default:
        case 0:
          component = ChinaMap
          break
        case 1:
          component = ningxMap
          break
        case 2:
          component = DataCenter
          break
      }
      return component
    })
    return () => {
      if (step.value > 2) {
        emit('showCover', true)
        return
      }
      return (
        <div
          class='w-full h-full'
          style={`background:url(${china_map}); background-size: 100% 100%;`}
        >
          {h(Component.value, {
            onCurrentStep: (s: number) => {
              step.value = s + 1
            },
          })}
        </div>
      )
    }
  },
})
